<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>可拖拽的 Div</title>
    <style>
        .draggable {
            display: block;
            position: fixed;
            top: 20%;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgb(255, 255, 255);
            border: 1px solid rgb(204, 204, 204);
            box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 10px;
            width: 598px;
            height: 398px;
            z-index: 99999;
            border-radius: 25px;
        }
        .header {
            height: 30px;
            background-color: #f0f0f0;
            cursor: move;
            border-radius: 25px 25px 0 0;
            padding: 5px;
        }
    </style>
</head>
<body>

<div class="draggable">
    <div class="header">点击拖拽</div>
    <!-- 其他内容可以放在这里 -->
</div>

<script>
    // 获取可拖拽的 div 和拖拽区域（header）
    const draggable = document.querySelector('.draggable');
    const header = document.querySelector('.header');

    let offsetX, offsetY;

    // 鼠标按下事件，记录鼠标位置
    header.addEventListener('mousedown', (e) => {
        offsetX = e.clientX - draggable.offsetLeft;
        offsetY = e.clientY - draggable.offsetTop;

        // 设置鼠标移动事件
        document.addEventListener('mousemove', drag);
        document.addEventListener('mouseup', stopDrag);
    });

    // 拖拽事件，更新 div 位置
    function drag(e) {
        draggable.style.left = `${e.clientX - offsetX}px`;
        draggable.style.top = `${e.clientY - offsetY}px`;
    }

    // 停止拖拽事件，移除事件监听
    function stopDrag() {
        document.removeEventListener('mousemove', drag);
        document.removeEventListener('mouseup', stopDrag);
    }
</script>

</body>
</html>
